<script setup lang="ts">
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@/components/ui/carousel'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import {Button} from "~/components/ui/button";

const route = useRoute()


type TypeCarouselItems = {
  title: string,
  description: string,
  url: string,
}

const carouselItems = ref<TypeCarouselItems[]>([
  {
    title: "Высоты приключений",
    description: "Откройте для себя величие горных вершин",
    url: "/images/carousel/carousel-1.jpg",
  },
  {
    title: "Ледяной мир",
    description: "Окунитесь в завораживающий зимний лес",
    url: "/images/carousel/carousel-2.jpg",
  },
  {
    title: "Летний рассвет",
    description: "Откройте для себя красоту лесных прогулок",
    url: "/images/carousel/carousel-3.jpg",
  },
])

type TypeTour = {
  title: string,
  description: string,
  link: string,
  img_url: string,
}

const bestTours = ref<TypeTour[]>([
  {
    title: "Путешествие к Таганаю",
    description: "Совершите незабываемое путешествие к одному из самых живописных природных парков Южного Урала - Таганаю. Вас ждут увлекательные пешие маршруты к горным вершинам, откуда открываются захватывающие панорамы.",
    link: "taganay",
    img_url: '/images/bestTour/taganay-img.jpg'
  },
  {
    title: "Горные тропы Башкирии",
    description: "Откройте для себя удивительный мир Башкирии - республики, занимающей большую часть Южного Урала. Вы совершите захватывающие походы по горным тропам, полюбуетесь величественными вершинами, узнаете об уникальной культуре и традициях башкирского народа.",
    link: "bashkir",
    img_url: '/images/bestTour/bashkir-img.jpg'
  },
  {
    title: "Тропами Ильменских гор",
    description: "Отправляйтесь в увлекательное путешествие по Ильменскому заповеднику - одному из самых красивых мест Южного Урала. Вы пройдете по горным тропам, откуда открываются захватывающие виды на гранитные кручи и ледниковые цирки.",
    link: "ilmensk",
    img_url: '/images/bestTour/ilmensk-img.jpg'
  },
])

type TypeCompanyInfo = {
  icon: string,
  description: string,
}

const CompanyInfo = ref<TypeCompanyInfo[]>([
  {
    icon: 'mdi:mountain-outline',
    description: 'Основная специализация компании - экскурсии по заповедникам Южного Урала.'
  },
  {
    icon: 'mdi:building',
    description: 'Наш офис находится в центре Челябинска.'
  },
  {
    icon: 'mdi:bus',
    description: 'Мы используем самые комфортные автобусы что-бы вам было приятно путешествовать'
  },
])

type TypeReviews = {
  reviewerName: string,
  review: string,
  stars: number,
}


const reviews = ref<TypeReviews[]>([
  {
    reviewerName: "Иван Петров",
    review: "Замечательная компания! Организация тура была на высшем уровне, а виды Южного Урала просто захватывающие. Гиды компетентно рассказывали об истории и культуре региона. Обязательно поеду с ними снова, надеюсь, в следующий раз смогу больше времени провести в этом прекрасном месте.",
    stars: 5
  },
  {
    reviewerName: "Мария Сидорова",
    review: "Очень понравилось путешествие с 'Странниками без границ'. Гид был очень профессиональным и интересно рассказывал об истории и природе региона. Единственное, что могло быть лучше - это размещение в отелях. Но в целом, отличная поездка!",
    stars: 4
  },
  {
    reviewerName: "Алексей Смирнов",
    review: "Я скептически относился к этой компании, но в итоге был приятно удивлен. Организация тура была на высоком уровне, а сами туры по Южному Уралу оказались очень увлекательными. Рекомендую всем, кто хочет познакомиться с этим замечательным регионом!",
    stars: 4
  }
])

</script>

<template>
  <main class="container flex flex-col">
    <section class="pt-0" >
      <Carousel class="pb-7" :opts="{
        loop: true,
      }">
        <CarouselContent class="rounded-2xl">
          <CarouselItem v-for="item in carouselItems">
              <div class="pl-52 relative max-md:pl-0">
                <div class="flex flex-col gap-5 absolute top-1/3 left-3 max-md:left-5 max-md:top-0 max-md:h-full max-md:justify-center">
                  <h4 class="text-foreground text-7xl">{{ item.title }}</h4>
                  <span class="text-foreground text-xl pl-2">{{ item.description }}</span>
                </div>
                <img :src="item.url" class="aspect-video rounded-2xl" alt="slider-image">
              </div>
          </CarouselItem>
        </CarouselContent>

        <div class="absolute bottom-0 right-10">
          <carousel-previous>
            <Icon name="line-md:arrow-left" />
          </carousel-previous>
          <carousel-next>
            <Icon name="line-md:arrow-right" />
          </carousel-next>
        </div>
      </Carousel>
    </section>
    <section class="flex flex-col gap-8" data-aos="fade-up">
      <h3 class="text-4xl font-semibold">Лучшие туры</h3>
      <div class="grid-cols-3 grid gap-5 grid-rows-1 md:max-lg:grid-cols-2 max-md:grid-cols-1">
          <Card v-for="(tour, index) in bestTours" :key="tour.title" class="flex flex-col" :class="{'md:max-lg:hidden': index > 1}">
            <CardHeader>
              <CardTitle>{{tour.title}}</CardTitle>
            </CardHeader>
            <CardContent class="flex flex-col gap-5">
              <img :src="tour.img_url" :alt="tour.title" class="aspect-video rounded-xl">
              <p>{{tour.description}}</p>
            </CardContent>
            <CardFooter class="flex-shrink-0 flex-grow flex flex-col justify-end">
              <Button class="w-full">Подробнее</Button>
            </CardFooter>
          </Card>
      </div>
      <div class="flex justify-end">
        <Button class="w-48">Все туры</Button>
      </div>
    </section>
    <section class="flex flex-col gap-8" data-aos="fade-up">
      <h3 class="text-4xl font-semibold">О компании</h3>
      <div class="grid-cols-3 grid gap-5 max-md:grid-cols-1">
        <div class="flex flex-col justify-start items-center gap-5" v-for="info in CompanyInfo" :key="info.description">
          <Icon :name="info.icon" size="112px" class="text-primary"/>
          <div class="flex flex-col justify-center items-center flex-grow">
            <span class="text-center text-lg">{{info.description}}</span>
          </div>
        </div>
      </div>
    </section>
    <section class="flex flex-col gap-8" data-aos="fade-up">
      <h3 class="text-4xl font-semibold">Отзывы</h3>
      <div class="grid-cols-3 grid gap-5 grid-rows-1 md:max-lg:grid-cols-2 max-md:grid-cols-1">
        <Card v-for="(review, index) in reviews" :key="review.review" class="flex flex-col" :class="{'md:max-lg:hidden': index > 1}">
          <CardHeader>
            <CardTitle>{{review.reviewerName}}</CardTitle>
          </CardHeader>
          <CardContent class="flex flex-col gap-5">
          <p>{{ review.review }}</p>
          </CardContent>
          <CardFooter class="flex-shrink-0 flex-grow flex flex-col justify-end">
            <div class="flex w-full justify-end">
              <Icon name="line-md:star-filled" v-for="index in review.stars" size="2rem" color="yellow"/>
              <Icon name="line-md:star" v-for="index in (5 - review.stars)" size="2rem" color="yellow"/>
            </div>
          </CardFooter>
        </Card>
      </div>
    </section>
  </main>
</template>

<style>
section {
  padding: 30px 0;
}
</style>
